import { Tabs, Tab, PackageManagerTabs } from '@theme';

# Next.js

[next-rspack](https://www.npmjs.com/package/next-rspack) is a community-driven plugin that enables Next.js projects to use Rspack as the bundler (experimental).

:::tip
See the [Rspack joins the Next.js ecosystem](/blog/rspack-next-partner) blog post to learn more details.
:::

## Installation

Install the `next-rspack` package:

<PackageManagerTabs command="add next-rspack -D" />

:::tip
If you are using a Next.js version below 15.3.0, please upgrade to >= 15.3.0 first, see [Next.js - Upgrading](https://nextjs.org/docs/pages/building-your-application/upgrading).
:::

## Usage

Wrap your existing configuration in the project's `next.config.js` or `next.config.ts`:

<Tabs>
  <Tab label="next.config.ts">

```ts
import withRspack from 'next-rspack';
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  /* config options here */
};

export default withRspack(nextConfig);
```

  </Tab>
  <Tab label="next.config.js">

```ts
const withRspack = require('next-rspack');

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
};

module.exports = withRspack(nextConfig);
```

  </Tab>
</Tabs>

> Example: [next.js/examples/with-rspack](https://github.com/vercel/next.js/tree/canary/examples/with-rspack).

## Customizing Rspack configuration

Through Rspack's compatibility with webpack, when using `next-rspack`, you can customize configurations in the same way as you would with webpack.

In `next.config.js`, modify Rspack's configuration by adding the following callback function:

```js title="next.config.js"
module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) => {
    // Important: return the modified config
    return config;
  },
};
```

> For more details, see the [Next.js - Custom Webpack Config](https://nextjs.org/docs/app/api-reference/config/next-config-js/webpack).

## Usage with next-compose-plugins

Alternatively, you can use [next-compose-plugins](https://www.npmjs.com/package/next-compose-plugins) to quickly integrate `next-rspack` with other Next.js plugins:

```js title="next.config.js"
const withPlugins = require('next-compose-plugins');
const withRspack = require('next-rspack');

module.exports = withPlugins([
  [withRspack],
  // your other plugins here
]);
```
